<script setup>

// 使用假数据，真实环境需要去掉
// import '../mock/mymock.js'
// API
import dayjs from 'dayjs'
import approveApi from '../api/approve.js'

// 获取查询字符串部分
const queryString = window.location.search.substring(1); // "name=John&age=30"

// 将查询字符串分割成键值对数组
const paramsArray = queryString.split('&');

// 创建一个对象来存储参数
const params = {};

paramsArray.forEach(param => {
  const [key, value] = param.split('=');
  params[decodeURIComponent(key)] = decodeURIComponent(value);
});

const userNameId = params.userNameId;

const userStore = {};

const list = ref([])

function getList(userId,flowType) {
  approveApi.getList(userId,flowType).then(res=>{
    list.value = res;
  });
}

// 通过审批
function approve(item) {
  approveApi.approve(item, userNameId).then(function(res) {
    if(res.code === '200'){
      return window.location.href= '/system/approve/approve/index.html?userNameId='+userNameId;
    }else{
      let msg = res.message+":"+res.remark.message;
      console.log(msg);
      alert(msg);
    }
  });
}

function reject(item) {
  approveApi.reject(item,userNameId).then(function(res) {
    if(res.code === '200'){
      return window.location.href= '/system/approve/approve/index.html?userNameId='+userNameId;
    }else{
      let msg = res.message+":"+res.remark.message;
      console.log(msg);
      alert(msg);
    }
  });
}

function toDetail(autoIdUp,flowType) {
  if(flowType === 'DANA'){
    return ;
  }
  return window.location.href= '../detail/index.html?autoId='+autoIdUp+'&flowType='+flowType+"&userNameId="+userNameId;
}

onMounted(()=> {
  /*userApi.getUserinfo().then((res)=> {
    userStore.userId = res.userId;
    getList(userStore.userId);
  });*/

  //const queryParam = this.$route.params.userNameId;
  const queryParam = new URLSearchParams(window.location.search).get('userNameId');
  const flowType = new URLSearchParams(window.location.search).get('flowType');
  getList(queryParam,flowType);
})


</script>

<template>
  <div>
    <div v-if="list.length === 0" style="text-align: center;margin-top: 100px">没有找到数据！</div>
    <div v-for="item in list" class="item">
      <div class="header">
        <div class="title">
          {{item.flowTypeName}}
        </div>
        <div class="buttons">
          <van-button type="primary" size="small" @click="approve(item)">同意</van-button>
          <van-button type="danger" size="small" @click="reject(item)">退回</van-button>
        </div>
      </div>
      <div class="content" @click="toDetail(item.autoId,item.flowType)">

          <div class="row">
            <div class="title-content">
              名称：
            </div>
            <div class="name-content">
              {{ item.flowSubject }}
            </div>
          </div>
          <div class="row">
            <div class="title-content">
              日期：
            </div>
            <div class="name-content">
              {{ dayjs(item.startDate).format('YYYY-MM-DD') }}
            </div>
          </div>
          <div class="row" v-if="item.flowType !=='DANA'">
            <div class="title-content">
              金额：
            </div>
            <div class="name-content">
              {{ item.amount }}
            </div>
          </div>
          <div class="row">
            <div class="title-content">
              申请人：
            </div>
            <div class="name-content">
              {{ item.startUser }}
            </div>
          </div>
      </div>
    </div>
  </div>
</template>

<style scoped>

.row {
  display: flex;
}

.title-content {
  white-space:nowrap;
  width: 5em;
  flex-shrink: 0;
}

.name-content {
  flex-grow: 1;
  white-space:nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item {
  border-radius: 4px;
  border: 1px solid #ddd;
  margin: 1em;
  overflow: hidden;
  height: 12em;
  display: flex;
  flex-direction: column;
  font-size: 1em;

}

.item .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5em;
  border-bottom: 1px solid #ddd;

}

.item .header .buttons button+button {
  margin-left: 0.5em;
}
.item .content {
  padding: 0.5em;
}
</style>